<div class="widget splith" ngClass.xs="double-height xs">
  <div class="card-container  front">
    <mat-card class="front" fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between stretch">
      <!--<mat-toolbar-row fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between start" fxFlex="100" class="mat-card-toolbar">
        <h4 class="mat-card-title-text"><div class="card-title-text">{{title | translate}}</div></h4>
        <ng-template *ngIf="configurable"><button mat-icon-button (click)="toggleConfig()">
          <mat-icon>settings</mat-icon>
          </button></ng-template>
          </mat-toolbar-row>-->
      <mat-card-content fxLayout="column" fxLayoutAlign="center start" fxFlex="100">
        <!--<viewchartline fxFlex="100" fxFlexAlign="end" #chartCpu width="600" height="160" [style.display]="isFlipped ? 'none': 'block'"></viewchartline>-->
        <!-- Chart -->
        <div class="chart-wrapper">
          <div [id]="chartId"></div>
          <div class="x-axis">
            <div class="start-time">{{startTime}}</div>
            <div class="end-time">{{endTime}}</div>
          </div>
        </div>

        <!-- DETAILS -->
        <div class="title-wrapper" fxFlex="100">
          <ng-container *ngIf="showLegendValues">
            <p class="title">{{altTitle}}</p>
            <p class="subtitle">{{altSubtitle}}</p>
          </ng-container>
          <ng-container *ngIf="!showLegendValues">
            <p class="title">{{title}}</p>
            <p class="subtitle">{{subtitle}}</p>
          </ng-container>
          <button mat-button class="reports-btn" (click)="router.navigate(['reportsdashboard'])">REPORTS</button>
        </div>
      </mat-card-content>
    </mat-card>
    <ng-template *ngIf="configurable">
    <mat-card class="back">
      <mat-card-content fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
      </mat-card-content>
      <div class="widget-footer">
        <button mat-button color="accent" (click)="toggleConfig()">{{"Cancel" | translate}}</button>
        <button mat-button color="primary" type="submit" form="preferences" (click)="toggleConfig()">{{"Save" | translate}}</button>
      </div>
    </mat-card>
    </ng-template>
  </div>
</div>
